@keyframes fadeIn {
  from {
    opacity: 0;        
  }
  to {
    opacity: 1;        
  }
}

.container{
  position:absolute;
  left:50%;
  top:50%;
  transform: translate(-50%,-50%);
  width: 75%;
  height: 55%;
  background:linear-gradient(to top,#ffffff,#ecf2fe,#deeafe);
  border-radius:20px;
  z-index:1001;
  animation: fadeIn 0.6s ease-out forwards;
}

.send_font{
  position: absolute;
  top:7%;
  left:50%;
  transform: translate(-50%);
  font-size:20px;
  font-weight:bold;
}

.close{
  position:absolute;
  right:5px;
  top:-10px;
  width:5%;
  height:10%;
  background:transparent;
  font-size:25px;
  font-weight: 100;
  text-align: center;
  color:#b0aeae;
}

.ball{
  position:absolute;
  left:48%;
  top:17%;
  transform: translate(-50%);
  width:20vw;
  height:20vw;
}

.name{
  position:absolute;
  top:34%;
  left:50%;
  transform: translate(-50%);
  font-size:18px;
  font-weight: bold;
}

.distant_font{
  position: absolute;
  left:50%;
  top:43%;
  width: 100%;
  transform: translate(-50%);
  color:#91bbf9;
  font-size:12px;
  display: flex;
  align-items: center;
  text-align: center;
  justify-content: center;
}

.send_content{
  font-size:13px;
}

.send1{
  position: absolute;
  top:52%;
  left:50%;
  transform: translate(-50%);
  width: 90%;
  height: 6%;
  border-radius: 9999px;
  border:1px solid #dfdfdf;
  background-color: #fcfcfc;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size:12px;
  color: #919292;
  padding: 0;
}

.send2{
  position: absolute;
  top:61%;
  left:50%;
  transform: translate(-50%);
  width: 90%;
  height: 6%;
  border-radius: 9999px;
  border:1px solid #dfdfdf;
  background-color: #fcfcfc;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size:12px;
  color: #919292;
  padding: 0;
}

.send3{
  position: absolute;
  top:70%;
  left:50%;
  transform: translate(-50%);
  width: 90%;
  height: 6%;
  border-radius: 9999px;
  border:1px solid #dfdfdf;
  background-color: #fcfcfc;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size:12px;
  color: #919292;
  padding: 0;
}

.mask {
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: 1000;
  background-color:black ;
  opacity: 0.8;
  }



  .is_active1{
    position: absolute;
    top:52%;
    left:50%;
    transform: translate(-50%);
    width: 90%;
    height: 6%;
    border-radius: 9999px;
    border:1px solid #cee1fd;
    background-color: #e6f0fe;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size:12px;
    color: #97c0f9;
    padding: 0;
  }

  .is_active2{
    position: absolute;
    top:61%;
    left:50%;
    transform: translate(-50%);
    width: 90%;
    height: 6%;
    border-radius: 9999px;
    border:1px solid #cee1fd;
    background-color: #e6f0fe;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size:12px;
    color: #97c0f9;
    padding: 0;
  }

  .is_active3{
    position: absolute;
    top:70%;
    left:50%;
    transform: translate(-50%);
    width: 90%;
    height: 6%;
    border-radius: 9999px;
    border:1px solid #cee1fd;
    background-color: #e6f0fe;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size:12px;
    color: #97c0f9;
    padding: 0;
  }

  .send_btn_active{
    position: absolute;
    left:50%;
    bottom: 5%;
    transform: translate(-50%);
    width: 45%;
    height: 8%;
    display: flex;
    justify-content: center;
    align-items: center;
    color:white;
    background-color: #81b3f8;
    border-radius: 9999px;
    font-weight: 100;
  }

  .send_btn{
    position: absolute;
    left:50%;
    bottom: 5%;
    transform: translate(-50%);
    width: 45%;
    height: 8%;
    display: flex;
    justify-content: center;
    align-items: center;
    color:#a6a8ab;
    background-color: #e5e5e5;
    border-radius:9999px;
    font-weight: 100;
  }

  .warning_font{
    position:absolute;
    left:50%;
    bottom: 18%;
    transform: translate(-50%);
    font-size:10px;
    color:#bdbdbd;
  }  
